<template>
	<view class="rechage-records">
		<c-layout>
			<c-navigation-bar slot="head" :title="title" navbar-bg-color="transparent" title-color="#000">
			</c-navigation-bar>
			<view class="TabBox">
				<view class="Time">
					<u-picker :confirm-text="$t('system.affirm')" :cancel-text="$t('system.cancel')"
						:default-time="`${nowYear}/${nowMonth}/01`" v-model="dateShow" mode="time" :params="params"
						:show-time-tag='false' @confirm="bindDateChange"></u-picker>
					{{nowMonth}}-{{nowYear}}
					<u-icon name="arrow-down" @click="dateShow=true"></u-icon>
				</view>
				<view v-if="typeInit==0 || typeInit==3">
					<u-tabs :list="navList1" :current="init" @change="tabsChange"></u-tabs>
				</view>
				<view v-else>
					<u-tabs :list="navList2" :current="init" @change="tabsChange"></u-tabs>
				</view>
			</view>

			<scroll-view class="mainBox" scroll-y="true" @scrolltolower="onreachBottom">

				<view class="main" v-if="dataList.length">
					<view class="mainItem" v-for="(item,index) in dataList" :key="index">
						<view class="mainItem_time">
							{{publicJS.timeZoneSwitching(item.createTime)}}
						</view>
						<view class="mainItem_status">
							<view class="num">
								+{{item.amount}}
							</view>
							<view class="status" v-if="typeInit==0||typeInit==3">
								<text
									v-if="typeInit==0">{{item.auditType==0?$t('orderDetails.UnderReview'):item.auditType==1?$t('liveBar.rechargeSuccess'):item.auditType==2?$t('storeManagement.recharge_failed'):''}}</text>
								<text
									v-else>{{item.status==0?$t('orderDetails.UnderReview'):item.status==1?$t('liveBar.rechargeSuccess'):item.status==-1?$t('storeManagement.recharge_failed'):''}}</text>
							</view>
							<view class="" v-else>
								<view class="status" v-if="typeInit==1">
									<text>{{item.auditType==0?$t('orderDetails.UnderReview'):item.auditType==1?$t('storeManagement.withdrawal_successful'):item.auditType==2?$t('storeManagement.withdrawal_failed'):item.auditType==3?$t('storeManagement.withdrawal_cancellation'):''}}</text>
									<view v-if="item.auditType==0&&typeInit==1" class="cancelwithdraw" @click="cancelwithdraw(item)">
										{{$t('storeManagement.cancellation')}}
									</view>
								</view>
								<view class="status" v-else>
									<text>{{item.status==0?$t('orderDetails.UnderReview'):item.status==1?$t('storeManagement.withdrawal_successful'):item.status==-1?$t('storeManagement.withdrawal_failed'):item.status==2?$t('storeManagement.withdrawal_cancellation'):''}}</text>
									<view v-if="item.status==0&&typeInit==4" class="cancelwithdraw" @click="cancelwithdraw(item)">
										{{$t('storeManagement.cancellation')}}
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="noData" v-if="!dataList.length">
					<image class="noDataImg" src="../../static/images/no-data.png" mode=""></image>
					<view class="noDataTitle">
						{{$t('storeManagement.NoData')}}
					</view>
				</view>
			</scroll-view>
		</c-layout>
		<u-mask :show="isloading" @click="show = false">
			<view class="warp">
				<view class="rect" @tap.stop>
					<u-loading mode="flower"></u-loading>
				</view>
			</view>
		</u-mask>
	</view>
</template>

<script>
	import { combinations, number } from 'mathjs'
	export default {
		data() {
			const currentDate = this.getDate({
				format: true
			})
			return {
				isloading: false,
				params: {
					year: true,
					month: true,
					day: false,
					hour: false,
					minute: false,
					second: false
				},
				nowYear: new Date().getFullYear(),
				nowMonth: (new Date().getMonth() + 1).toString().length == 1 ? '0' + (new Date().getMonth() + 1) : new Date()
					.getMonth() + 1,
				title: '', //title判断类型
				typeInit: '', //判断类型
				dateShow: false, //日期选择组件是否显示
				date: currentDate,
				navList1: [
					{ name: this.$t('storeManagement.all') },
					{ name: this.$t('orderDetails.UnderReview') },
					{ name: this.$t('liveBar.rechargeSuccess') },
					{ name: this.$t('storeManagement.recharge_failed') },
				],
				navList2: [
					{ name: this.$t('storeManagement.all') },
					{ name: this.$t('orderDetails.UnderReview') },
					{ name: this.$t('storeManagement.withdrawal_successful') },
					{ name: this.$t('storeManagement.withdrawal_failed') },
					{ name: this.$t('storeManagement.withdrawal_cancellation') },
				],
				init: 0,
				dataList: '',
				startTime: '',
				endTime: '',
				startDate1: '',
				endDate1: '',
				pageNum: 1,
				tabIndex: '',
			}
		},
		onLoad(option) {
			this.nowTime()
			// console.log(new Date().valueOf())
			if (option.type == 0) { //个人充值记录
				this.topUp(this.tabIndex, this.pageNum, this.startTime, this.endTime)
			} else if (option.type == 1) { //个人提现记录
				this.withdraw(this.tabIndex, this.pageNum, this.startTime, this.endTime)
			} else if (option.type == 3) { //店铺充值记录
				this.shoptopUp('sre', this.tabIndex, this.pageNum, this.startTime, this.endTime)
			} else if (option.type == 4) { //店铺提现记录
				this.shopwithdraw('swl', this.tabIndex, this.pageNum, this.startTime, this.endTime)
			}
			this.typeInit = option.type
			console.log(option.type)
			if (option.type == 0) {
				this.title = this.$t('storeManagement.recharge_record')
			} else if (option.type == 1) {
				this.title = this.$t('storeManagement.withdrawal_records')
			} else if (option.type == 3) {
				this.title = this.$t('storeManagement.shop_recharge_record')
			} else {
				this.title = this.$t('storeManagement.shop_withdrawal_records')
			}
		},
		computed: {
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			}
		},
		methods: {
			onreachBottom() {
				this.pageNum = this.pageNum + 1
				if (this.typeInit == 0) { //个人充值记录
					this.topUp(this.tabIndex, this.pageNum, this.startTime, this.endTime)
				} else if (this.typeInit == 1) { //个人提现记录
					this.withdraw(this.tabIndex, this.pageNum, this.startTime, this.endTime)
				} else if (this.typeInit == 3) { //店铺充值记录
					this.shoptopUp('sre', this.tabIndex, this.pageNum, this.startTime, this.endTime)
				} else if (this.typeInit == 4) { //店铺提现记录
					this.shopwithdraw('swl', this.tabIndex, this.pageNum, this.startTime, this.endTime)
				}
			},
			cancelwithdraw(item) {
				this.isloading = true
				if (this.typeInit == 1) {
					this.$u.post(`/app/user/rw/cancel/${item.id}`).then(res => {
						if (res.code == 200) {
							this.isloading = false
							item.auditType = 3
						}
					})
				}
				if (this.typeInit == 4) {
					this.$u.post(`/app/shop/rw/cancel`, { id: item.id }).then(res => {
						if (res.code == 200) {
							this.isloading = false
							item.status = 2
						}
					})
				}
			},
			//弹出日期选择
			select_date() {
				this.dateShow = true
			},
			//获取当前时间
			nowTime() {
				let nowYear = new Date().getFullYear()
				let nowMounth = new Date().getMonth() + 1
				let nextYear = nowYear
				let nextMounth = nowMounth + 1
				if (nowMounth > 12) {
					nextYear + 1
					nextMounth = 1
				}
				this.nowYear = nowYear
				this.nowMounth = nowMounth
				//开始时间---时间戳
				var lastDate = new Date(this.nowYear, this.nowMonth, 0).getDate(); //获取当月最后一日
				this.startTime = Number(this.publicJS.timeZoneSwitching(nowYear + '-' + nowMounth + '-' + '01', "x",'UTC'))
				this.endTime = Number(this.publicJS.timeZoneSwitching(nowYear + '-' + nowMounth + '-' + lastDate+' '+"23:59:59", "x",'UTC'))
			},
			// //选择日期
			// selectDate(e){
			// 	console.log(e)
			// 	this.nowYear=e.year
			// 	this.nowMounth=e.month
			// 	console.log(this.nowYear,this.nowMounth)
			// },
			bindDateChange: function(e) {
				this.nowYear = e.year
				this.nowMonth = e.month
				this.init = 0
				console.log(this.nowYear, this.nowMonth)
				var lastDate = new Date(this.nowYear, this.nowMonth, 0).getDate(); //获取当月最后一日
				let date1 = this.nowYear + '-' + this.nowMonth + '-' + lastDate+' '+"23:59:59"
				
				let date2 = this.nowYear + '-' + this.nowMonth + '-' + '01'
				this.dataList = []
				this.pageNum = 1
				this.startTime = Number(this.publicJS.timeZoneSwitching(date2, "x",'UTC')) //开始时间
				this.endTime = Number(this.publicJS.timeZoneSwitching(date1, "x",'UTC')) //结束时间
				console.log(this.publicJS.timeZoneSwitching(date2, "DD/MM/YYYY HH:mm:ss",'UTC'),this.publicJS.timeZoneSwitching(date1, "DD/MM/YYYY HH:mm:ss",'UTC'))
				if (this.typeInit == 0) {
					this.topUp('', this.pageNum, this.startTime, this.endTime)
				} else if (this.typeInit == 1) {
					this.withdraw('', this.pageNum, this.startTime, this.endTime)
				} else if (this.typeInit == 3) {
					this.shoptopUp('sre', '', this.pageNum, this.startTime, this.endTime)
				} else if (this.typeInit == 4) {
					this.shoptopUp('swl', '', this.pageNum, this.startTime, this.endTime)
				}
			},
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();

				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;
				day = day > 9 ? day : '0' + day;
				return `${year}年${month}月	`;
			},
			//查询用户充值
			topUp(auditType = '', pageNum, startTime, endTime) {
				this.$u.post('/app/user/recharge/page', { pageSize: 10, pageNum, auditType, startTime, endTime }).then(res => {
					this.dataList = [
						...this.dataList,
						...res.data.records
					]
					console.log(this.dataList)
				})
			},
			//查询用户提现
			withdraw(auditType = '', pageNum, startTime, endTime) {
				this.$u.post('/app/user/withdrawals/page', { pageSize: 10, pageNum, auditType, startTime, endTime }).then(
				res => {
					this.dataList = [
						...this.dataList,
						...res.data.records
					]
					console.log(this.dataList)
				})
			},
			//店铺充值记录
			shoptopUp(type, status = '', pageNum, startTime, endTime) {
				this.$u.post('/app/shop/rw/list', { pageSize: 10, pageNum, type, status, startTime, endTime }).then(res => {
					this.dataList = [
						...this.dataList,
						
						...res.data.records
					]
					this.dataList.forEach(i=>{
						i.createTime=i.createDate
					})
				})
			},
			//店铺提现记录
			shopwithdraw(type, status = '', pageNum, startDate, endDate) {
				this.$u.post('/app/shop/rw/list', { pageSize: 10, pageNum, type, status, startDate, endDate }).then(res => {
					this.dataList = [
						...this.dataList,
						...res.data.records
					]
					this.dataList.forEach(i=>{
						i.createTime=i.createDate
					})
				})
			},

			tabsChange(index) {
				this.init = index
				this.pageNum = 1
				this.dataList = []
				
				if (this.typeInit == 0) {
					if (index == 0) {
						this.tabIndex = ''
						this.topUp('', this.pageNum, this.startTime, this.endTime)
					} else {
						this.tabIndex = index - 1
						this.topUp(index - 1, this.pageNum, this.startTime, this.endTime)
					}
					console.log(index)
				} else if (this.typeInit == 1) {
					if (index == 0) {
						this.tabIndex = ''
						this.withdraw(this.tabIndex, this.pageNum, this.startTime, this.endTime)
					} else {
						this.tabIndex = index - 1
						console.log(this.tabIndex)
						this.withdraw(this.tabIndex, this.pageNum, this.startTime, this.endTime)
					}
				} else if (this.typeInit == 3) {
					if (index == 0) {
						this.tabIndex = ''
						this.shoptopUp('sre', this.tabIndex, this.pageNum, this.startTime, this.endTime)
					} else if (index == 3) {
						this.tabIndex = -1
						this.shoptopUp('sre', -1, this.pageNum, this.startTime, this.endTime)
					} else {
						this.tabIndex = index - 1
						this.shoptopUp('sre', index - 1, this.pageNum, this.startTime, this.endTime)
					}
				} else if (this.typeInit == 4) {
					if (index == 0) {
						this.tabIndex = ''
						this.shoptopUp('swl', this.tabIndex, this.pageNum, this.startTime, this.endTime)
					} else if (index == 3) {
						this.tabIndex = -1
						this.shoptopUp('swl', -1, this.pageNum, this.startTime, this.endTime)
					} else if (index == 4) {
						this.tabIndex = 2
						this.shoptopUp('swl', 2, this.pageNum, this.startTime, this.endTime)
					} else {
						this.tabIndex = index - 1
						this.shoptopUp('swl', index - 1, this.pageNum, this.startTime, this.endTime)
					}
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.rechage-records {
		.TabBox {
			height: 95px;

			.Time {

				background-color: #fff;
				padding: 15rpx 44rpx;
				width: 100%;
				display: flex;
				font-size: 32rpx;
			}
		}

		.mainBox {
			height: calc(100% - 95px);
			// padding: 0 44rpx;

		}

		.main {
			overflow: auto;
			padding: 0 44rpx;
			// padding-top: 150rpx;
			padding-bottom: 10rpx;

			.mainItem {
				width: 100%;
				height: 160rpx;
				display: flex;
				justify-content: space-between;
				border-bottom: 4rpx solid #eeeeee;

				.mainItem_time {
					line-height: 144rpx;
				}

				.mainItem_status {
					display: flex;
					flex-direction: column;
					justify-content: space-evenly;

					.num {
						text-align: end;
					}

					.status {
						display: flex;
						align-items: center;

						.cancelwithdraw {
							background-color: #a8a8a8;
							padding: 10rpx;
							color: #fff;
							border-radius: 10rpx;
							margin-left: 10rpx;
						}
					}
				}
			}
		}
	}

	.noData {
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;

		.noDataImg {
			width: 220rpx;
			height: 220rpx
		}
	}

	.warp {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100%;
	}

	.sticky {
		width: 100%;
		color: #fff;
	}
</style>